<template>
  <div class="depa-list-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <div class="list-con-div">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="item-text">
          {{item.firstName}}/{{item.categoryName}}
        </div>
        <div class="item-icon" @tap.stop="del(index)">
          <view class="icon u-flex">
            <u-icon name="trash" size="22" color="#FF5E01"></u-icon>
          </view>
        </div>
      </div>
    </div>
    <div style="margin:40rpx auto;width:280rpx">
      <u-button text="+ 新增商品品类" type="primary" shape="circle" @click="showCategory()" :plain="true"></u-button>
    </div>

    <view class="page-bottom-btn"
      :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',paddingLeft:'20rpx',paddingRight:'20rpx'}">
      <u-button text="提交选择的品类" type="primary" shape="circle" @click="select"></u-button>
    </view>


    <!--品名-->
	<u-popup :show="show" mode="bottom" @close="closeShow" :round="23">
	  <div style="height:80vh;overflow-y: auto;">
	    <div class="popupTitle" style="text-align: left;padding-left:16px;">
	      <img src="https://pic.moresu.com/Fh7aXiSipO2L_FphorVNxEH4DpGh"
	        style="width:14px;height:14px;display: inline-block;vertical-align: middle;" />
	      <span style="padding-left:20rpx;vertical-align: middle;">选择品名</span>
	    </div>
	    <div class="popup-con">
			<div class="cell-con-div">
				<div class="class-item" v-for="item in list1" :key="item.categoryId">
					  <div class="class-title">{{item.categoryName}}</div>
					  <div class="class-list">
						  <div class="list-item" 
						 :class="{'choose': chooseList.indexOf(ee.categoryId)!= -1}"
						  @click="chooseItem(ee,item)" v-for="ee in item.list" :key="ee.categoryId">{{ee.categoryName}}</div>
					  </div>
				</div>
			</div>
	    </div>
	  
	  </div>
	  
	  
	  <div style="width:100%;padding:24rpx;bottom:0;background: #fff;border-top:1px solid #eee">
	    <u-button text="确认" shape="circle" type="primary" @click="save"></u-button>
	  </div>
	
	</u-popup>
	

  </div>

</template>

<script>
  import {
    userDetail,getGoodsCate
  } from '@/config/api.js'
  import store from '@/store';
 import base from '@/config/baseUrl.js';
  const defaultForm = {
    orderId: '',
    cancelReason: '',
    cancelRemark: '',
  };
  export default {
    data() {
      return {
        show: false,
        isSelect: false,
        form: JSON.parse(JSON.stringify(defaultForm)),
        type: '',
        title: '',
        list: [],
		list1:[],
		chooseList: [],
		chooseFullList: [],
		systemInfo: base.systemInfo,
      }
    },
  
    onLoad(options) {
      if (options.type == 'select') {
        this.isSelect = true;
      }

      //选择角色页
      uni.getStorage({
        key: 'infoCateList',
        success: (e) => {
          this.list = e.data;
          uni.removeStorage({
            key: 'infoCateList'
          })
        }
      })
	  
	  this.getClassList()

    },


    methods: {
		chooseItem(e,item) {
		    let firstName = item.categoryName;
		    let i = this.chooseList.findIndex((el) => {
		      return el == e.categoryId
		    })
		    if (i != -1) {
		      console.log(i)
		      this.chooseList.splice(i, 1);
		      this.chooseFullList.splice(i, 1)
		    } else {
		      this.chooseList.push(e.categoryId);
		      this.chooseFullList.push({
		        categoryId: e.categoryId,
		        categoryName: e.categoryName,
			    firstName:firstName
		      });
		    }
		},
		
		closeShow() {
		  this.show = false
		},
		
		save() {
		  this.list = JSON.parse(JSON.stringify(this.chooseFullList))
		  this.show = false
		},
		
		getClassList(){
			getGoodsCate().then((res)=>{
				this.list1 = res
			})
		},
		
    
      //显示品名
      showCategory() {
        this.show = true;
      },
      select() {
        //是否需要返回地址(从订单确认页跳过来选收货地址)
        if (!this.isSelect) {
          return;
        }
        uni.setStorage({
          key: 'selectCategory',
          data: this.list,
          success() {
            uni.navigateBack();
          }
        })
      },

      del(i) {
        this.list.splice(i, 1)
      },
    }

  }
</script>

<style lang="scss">
  @import '@/style/common.scss';

  .depa-list-page {
    padding-bottom: 160rpx;

    .list-con-div {
      padding: 0 24rpx;
      background: #fff;

      .list-item {
        padding: 24rpx 0;
        font-size: $m-font;
        border-bottom: 1px solid #d6d7d9;
        @include flexbox(space-between, center);

        .item-icon {
          border-left: 1px solid #d6d7d9;
          padding-left: 20rpx;
        }
      }

      .list-item:last-child {
        border-bottom: 0px solid #d6d7d9;
      }
    }
  }

  .popupTitle {
    font-size: $b-font;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
  }

  .popup-con {
    padding: 0 16px 16px 16px;

    .cell-con-div{
    	 .class-item{
    			 margin-bottom:40rpx;
    			 background: #fff;
    			 border-radius: 18rpx;
    		     box-shadow: 0px 0px 10px rgba(0, 17, 52, 0.01);
    			 .class-title{
    				 font-size:32rpx;
    				 font-weight:bold;
    				 color: #000;
    			 }
    			 .class-list{
    				 .list-item{
    					 display: inline-block;
    					 width:30%;
    					 border:1px solid #eee;
    					 color: #1E1E1E;
    					 font-size:24rpx;
    					 text-align: center;
    					 height:56rpx;
    					 line-height: 54rpx;
    					 border-radius: 27rpx;
    					 margin-right:5%;
    					 margin-top:20rpx;
    				 }
    				.list-item:nth-child(3n){
    				  margin-right: 0;
    				}
    				.choose.list-item{
    					background: #FF5E01;
    					color:#fff
    				}
    			 }
    		 
    	 }
    	 .goodsList-content{
    		 background: #fff;
    		 border-radius: 18rpx;
    		 padding:32rpx;
    		 box-shadow: 0px 0px 10px rgba(0, 17, 52, 0.01);
    		 margin-bottom:40rpx;
    		 @include flexbox(space-between,flex-start);
    		 .content-left{
    			 flex:1;
    			 padding-right:40rpx;
    			 font-size:28rpx;
    			 color: #000;
    		 }
    		 .content-right{
    			 width:60rpx;
    			 text-align: right;
    		 }
    	 }
    }
  }

  .popup-bottom {
    background: #fff;
    margin-top: 10px;
    padding: 16px;
  }

  .popup-bottom-fixed {
    position: fixed;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    bottom: 0
  }
</style>